@import './mixin'

.fui-calendar-lite
  &-year-panel
    position: absolute
    top: 1px
    right: 0
    bottom: 0
    left: 0
    z-index: 10
    border-radius: 0.25rem
    background: $bg-body
    outline: none

    > div
      height: 100%

    &-header
      @include calendarPanelHeader

    &-body
      height: calc(100% - 34px)

    &-table
      table-layout: fixed
      width: 100%
      height: 100%
      border-collapse: separate

    &-cell
      text-align: center

    &-year
      display: inline-block
      margin: 0 auto
      color: $text-default
      background: transparent
      text-align: center
      height: 24px
      line-height: 24px
      padding: 0 6px
      border-radius: 4px
      transition: background 0.3s ease

      &:hover
        color: $bg-hover-mute !important
        background: $brand-primary
        cursor: pointer

    &-selected-cell &-year
      background: $brand-primary
      color: $bg-hover-mute

      &:hover
        background: $brand-primary
        color: $bg-hover-mute

    &-last-decade-cell,
    &-next-decade-cell
      &-year
        user-select: none
        /*color: darken($brand-primary, 20%)*/

